<script setup lang="ts">
import { IconDown } from '@arco-design/web-vue/es/icon'
import { get, post, Message, loadFile, message, formatEnum } from '@/utils'
import Modal from './components/CouponModal.vue'
import useModal from '@/hooks/useModal'
import { CouponType, UseCouponType } from '@/enum/coupon'
import GetModal from './components/GetModal.vue'
import useTable from '@/hooks/useTable'
import { BtnPermission } from '@/enum/permission'
import GiftModal from './components/GiftModal.vue'
const { store: getStore } = useModal()
const { store: giftStore } = useModal()
const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    get(
      {
        url: '/server-shop/sys-seller/coupon/page',
        data: { size: params.pageSize, ...params },
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}

const columns = formatColumns([
  { title: '优惠券名称', dataIndex: 'name', hideInSearch: false, width: 200, ellipsis: true },
  {
    title: '优惠券金额',
    dataIndex: 'money',
    ellipsis: false,
    valueType: 'money',
    width: 200,
  },
  {
    title: '优惠券状态',
    dataIndex: 'status',
    width: 200,
    valueEnum: {
      0: {
        text: '关闭',
        status: 'Error',
      },
      1: {
        text: '开启',
        status: 'Success',
      },
    },
  },
  {
    title: '领取方式',
    dataIndex: 'type',
    hideInSearch: false,
    valueType: 'select',
    width: 200,
    valueEnum: {
      [CouponType.手动领取]: { text: '手动领取' },
      [CouponType.赠送券]: { text: '赠送券' },
    },
  },
  {
    title: '优惠券使用类型',
    dataIndex: 'useType',
    valueEnum: formatEnum(UseCouponType),
    width: 200,
  },
  {
    title: '可用时间段/天数',
    dataIndex: 'time',
    width: 200,
    render: ({ record }) => h('span', null, record.day ? record.day + '天' : `${record.useStartTime} ~ ${record.useEndTime}`),
  },
  { title: '排序', dataIndex: 'sort', ellipsis: false, width: 200, sorter: true },

  {
    title: '操作',
    slotName: 'option',
    dataIndex: 'option',
    width: 300,
    fixed: 'right',
    btnList: [
      {
        name: '编辑',
        permission: BtnPermission.编辑,

        handle: ({ record }) => store.handleShow(record),
      },
      {
        name: '删除',
        permission: BtnPermission.删除,
        tip: '确认删除该条数据吗',
        type: 'popconfirm',
        handle: ({ record }) => {
          post(
            {
              url: '/server-shop/sys-seller/coupon/remove?ids=' + record.id,
              data: { status: 0 },
            },
            ({ code, msg }) => {
              if (code == 200) actionRef.value.reload()

              message({
                type: code == 200 ? 'success' : 'error',
                content: msg,
              })
            }
          )
        },
      },
      {
        name: '领取记录',
        permission: BtnPermission.查看,

        handle: ({ record }) => getStore.handleShow(record),
      },
      {
        name: '赠送用户',
        permission: BtnPermission.编辑,
        disabled: ({ record }) => record.type != CouponType.赠送券,
        handle: ({ record }) => {
          giftStore.handleShow(record)
        },
      },
    ],
  },
])
</script>

<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" column-resizable :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)" :scroll="{ x: 1000 }">
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
        <a-button type="primary" @click="store.handleShow({}, true)" v-permission="[BtnPermission.新建]">
          <template #icon>
            <icon-plus />
          </template>
          新建
        </a-button>
      </template>
    </ProTable>
    <Modal v-if="store.show" v-model:show="store.show" :id="store.id" @confirm="actionRef.reload" :edit="store.edit" />
    <GetModal v-if="getStore.show" v-model:show="getStore.show" :id="getStore.id" />
    <GiftModal v-if="giftStore.show" v-model:show="giftStore.show" :id="giftStore.id" @confirm="actionRef.reload" />
  </div>
</template>
